<template>
	<view>
		<view class="small-my-setting-address-box" v-for="(item,index) in addressList" :key="index">
			<view class="bottom-line">
				<view>{{item.name}} {{item.mobile}}</view>
				<view class="line2">{{item.province}} {{item.city}} {{item.district}} {{item.detail}}</view>
				<image src="../../static/img/my_setting_address/my_setting_address_default.png" v-if="item.isMain === 1"></image>
			</view>
			<view class="row row-middle">
				<view @click="handleEdit(item.id)">编辑</view>
				<view @click="handleDelete(item.id)">删除</view>
			</view>
		</view>
		<image src="../../static/img/my_setting_address/my_setting_address_add.png" @click="gotoAddAddress"></image>
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
import http from '../../api/api.js';
import Dialog from '../../wxcomponents/vant/vant-weapp/dialog/dialog.js';
export default {
	data: function() {
		return {
			userId:uni.getStorageSync('userId'),
			addressList:[]
		}
	},
	onLoad() {
		this.init({type:2,userId:this.userId})
	},
	methods: {
		init(data){
			http.getAddressList(data).then(res => {
				if(res.data.code === 1){
					this.addressList = res.data.data
				}
			})
		},
		gotoAddAddress() {
			uni.navigateTo({
				url:'my_setting_address_add'
			})
		},
		handleEdit(id){
			uni.navigateTo({
				url:`my_setting_address_add?addressId=${id}`
			})
		},
		handleDelete(id){
			Dialog.confirm({
			  title: '消息提示',
			  message: '是否删除当前地址'
			}).then(() => {
					http.deleteAddress({addressId:id,userId:this.userId}).then(res => {
						if(res.data.code === 1){
							this.init({type:2,userId:this.userId})
							Dialog.close();
						}
					})	
			  })
			  .catch(() => {
			    Dialog.close();
			  });
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../common/mixins';
.small-my-setting-address-box {
	@include box;
	& > view {
		height: 160upx;
		position: relative;
		:first-child {
			height: 70upx;
			line-height: 70upx;
		}
		:nth-child(3) {
			width: 100upx;
			height: 140upx;
			position: absolute;
			right: -20upx;
			top: 0;
		}
		& + view {
			view {
				padding: 0 20upx;
			}
			height: 80upx;
			:nth-child(2) {
				margin-left: 40upx;
			}
		}
	}
	& + image {
		display: block;
		width: 100%;
		height: 100upx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
}
</style>
